<template>
<a-spin :spinning="tableData.loading?tableData.loading:false" tip='数据加载中...' size='large' wrapperClassName='whov'>
  <div class='wd-vxe-table whov' :class="'wd-vxe-table_'+tableId+(tableData.tableInfo.maxHeight?' ':' vxe-table-auto')">
    <vxe-grid ref="vxeGrid"  @sort-change="sortChangeEvent"
    class="wd-vxe-grid"
    :class="tableDataModel.pageInfo?'wd-vxe-grid-table_height':''"
    :scroll-y="{mode: 'wheel'}"
    :column-config="{resizable: true}"
    header-cell-class-name="vxe-table-header"
    cell-class-name="vxe-table-cell"
    column-key
    :span-method="tableData.rowspanList?rowspanMethod :null"
    @custom="customChange"
    @cell-click="selectRadio"
    @filter-change="filterMethod"
    @checkbox-all="selectCheckBox"
    @checkbox-change="selectCheckBox"
    v-bind="tableDataModel.tableInfo">
      <!-- 配置右侧操作栏数据 -->
      <template v-slot:operation_template="{ row,rowIndex  }" v-if="tableData.operation">
        <template v-for="(item,index) in operationList" :key="'operation'+index">
            <!-- 如果displaySize:操作栏展示个数存在,则获取该值 否则默认展示50个操作 -->
            <template v-if="index<displaySize">
                <i-button :buttonData="changeButtonData(item)" :data="row" class="operation-button" @buttonclick="buttonClick" :key="index" v-if="!item.template" />
                <slot v-else-if="item.isShow===true" :name="item.template" :obj="item" :row="row" :index="rowIndex"></slot>
            </template>
        </template>

        <template v-if="operationList.length>displaySize">
            <a-dropdown>
                <template #overlay>
                  <a-menu>
                      <template v-for="(item,index) in operationList.filter((sitem,sindex)=>sindex>displaySize-1)" :key="index">
                           <a-menu-item v-if="!item.template">
                                <i-button :buttonData="changeButtonData(item)" :data="row" class="operation-button" @buttonclick="buttonClick" :key="index"  />
                           </a-menu-item>
                           <a-menu-item v-else-if="item.isShow===true">
                                <slot  :name="item.template" :obj="item" :row="row" :index="rowIndex"></slot>
                           </a-menu-item>
                      </template>
                  </a-menu>
                </template>
                <a-button class="operation-button"  type='link'>
                  ...
                </a-button>
              </a-dropdown>
        </template>

        <!-- <template v-for="(item,index) in tableData.operation.dataList">
          <i-button :buttonData="changeButtonData(item)" :data="row" class="operation-button" @buttonclick="buttonClick" :key="index" v-if="!item.template" />
          <slot v-else-if="item.isShow===true" :name="item.template" :obj="item" :row="row" :index="rowIndex"></slot>
        </template> -->

      </template>
      <!-- 自定义列 -->
      <template v-slot:[item.slotTemplate]="{ row, column, $rowIndex}" v-for="(item) in templateList">
        <slot :name="item.template" :obj="row" :column='column' :index="$rowIndex"></slot>
      </template>
      <!--表头右侧功能组-->
      <template #toolbar_tools>
        <ul class="wd-title-operation-ul i-table-top-botton" v-if="tableDataModel.titleOperation&&tableDataModel.titleOperation.length>0">
          <template v-for="(item,index) in (tableDataModel.titleOperation||[])" :key="'right'+index">
            <template v-if="item.position === 'right'">
              <li v-if='item.isShow===true'>
                <slot :name="item.template" :obj="item" v-if="item.template"></slot>
                <!-- <a-button v-else type="primary" @click=''>{{item.label}}</a-button> -->
                <i-button v-else :buttonData="changeButtonData(item,'primary')" :data="getSelectionEvent()"  @buttonclick="()=>buttonClick(item,getSelectionEvent())" :key="index"/>
              </li>
            </template>
          </template>
          <template v-if="tableData.authControl">
                <li v-if="tableData.authControl.export" @click="handChange('exportFun',getSelectionEvent())">导出</li>
                <li v-if="tableData.authControl.import" @click="handChange('importFun',getSelectionEvent())">导入</li>
                <li v-if="tableData.authControl.print" @click="handChange('printFun',getSelectionEvent())">打印</li>
          </template>
        </ul>
      </template>
      <!-- 表头左侧功能组 -->
      <template #toolbar_buttons>
        <ul class="btn-ul i-table-top-botton" v-if="tableDataModel.titleOperation&&tableDataModel.titleOperation.length>0">
          <template v-for="(item,index) in (tableDataModel.titleOperation||[])" :key="'left'+index">
            <template v-if="item.position !== 'right'">
              <li v-if='item.isShow===true' :style="{width:item.width}">
                <slot v-if="item.template" :name="item.template" :obj="item" :selectRow="selectRowList"></slot>
                <i-button v-else :buttonData="changeButtonData(item,'primary')" :data="getSelectionEvent()"  @buttonclick="()=>buttonClick(item,getSelectionEvent())" :key="index"/>
                <!-- <a-button v-else type="primary" @click='buttonClick(item, getSelectionEvent())'>{{item.label}}</a-button> -->
              </li>
            </template>
          </template>
        </ul>
      </template>
    </vxe-grid>
    <div v-if="tableDataModel.pageInfo" class="vxe-table-pagination">
         <vxe-pager
            background
            v-model:current-page="tableDataModel.pageInfo.currentPage"
            v-model:page-size="tableDataModel.pageInfo.pageSize"
            @page-change="handlePageChange"
            :total="tableDataModel.pageInfo.total"
            :page-sizes="tableDataModel.pageInfo.pageSizeOptions||pageSizeOptions"
            :layouts="['PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump', 'Sizes','Total']">
          </vxe-pager>
    </div>
  </div>
</a-spin>
</template>
<script lang="ts">
import { defineComponent, ref, PropType, onMounted, nextTick } from 'vue'
import IButton from '../../IButton/src/IButton.vue'
import { formatTime } from 'wd-platform-utils'
import { TableDataInterFace, OperationOptionsInterFace, ResultInterFace, TitleOptionsInterFace, ScolumnsInterFace } from './IVxeTableInterFace'
import Sortable from 'sortablejs'
import { VXETable, VxeGridInstance } from 'vxe-table'
import XEUtils from 'xe-utils'
import 'vxe-table-plugin-antd/dist/style.css'
import zhCN from 'vxe-table/es/locale/lang/zh-CN'
import VXETablePluginAntd from 'vxe-table-plugin-antd'
// import { Spin, Pagination, Button } from 'ant-design-vue'
VXETable.setup({
  i18n: (key: any, args: any) => XEUtils.toFormatString(XEUtils.get(zhCN, key), args)
})
VXETable.use(VXETablePluginAntd)
/**
 * 添加默认值
 */
class TableDataModel implements TableDataInterFace {
    // eslint-disable-next-line no-undef
    [field: string]: any;
    type = ''; // 每个表格唯一表示符
    loading = false;
    rowspanList=[];
    tableInfo: any = {
      stripe: true,
      isColumnDrop: false,
      isCheckBox: false,
      headerAlign: 'left',
      border: true,
      cellStyle: {
        height: '40px',
        fontSize: '12px',
        color: '#50565c'
      },
      headerCellStyle: {
        height: '40px',
        fontWeight: '400',
        fontSize: '14px',
        color: '#50565c'
      },
      //   resizable: true,
      maxHeight: '100%',
      // height: '100%',
      operation: [],
      rowStyle: ({ rowIndex }:{rowIndex:number}) => {
        if (rowIndex % 2 !== 0) {
          return {
            // backgroundColor: '#F4F6F8'
          }
        }
      },
      rowConfig: {
        useKey: true
        // isHover: true,
        // isCurrent: true
      },
      round: true,
      //   align: 'centent',
      columns: [],
      data: [],
      showOverflow: true,
      tooltipConfig: {
        theme: 'light'
      }
    };

    pageInfo = {
      total: 0,
      options: {},
      currentPage: 1,
      pageSize: 20,
      pageSizeOptions: [20, 40, 60, 80, 100, 200, 500]
    };

    callback (arg0: any): Promise < unknown > {
      return new Promise((resolve: any) => {
        console.log(arg0)
        resolve(false)
      })
    }

    constructor (tableData: TableDataInterFace) {
      for (const [field, value] of Object.entries(tableData)) {
        if (field === 'tableInfo') {
          Object.keys(value).forEach((key) => {
            if (typeof (value[key]) === 'function') {
              this.tableInfo[key] = value[key]
            } else {
              this.tableInfo[key] = JSON.parse(JSON.stringify(value[key]))
            }
          })
        } else {
          this[field] = value
        }
      }
    }
}

export default defineComponent({
  name: 'wd-vxe-table',
  props: {
    tableData: {
      type: Object as PropType < TableDataInterFace >,
      required: true
    }
  },
  setup (props, ctx) {
    const operationList = ref<OperationOptionsInterFace[]>([])
    const selectRowList = ref<any[]>([])
    const tableId = Math.round(Math.random() * 10000)
    const vxeGrid = ref({} as VxeGridInstance)
    const displaySize = ref<number>(3)
    const templateList = ref < any[] >([])
    // 设置不可选字段
    const columnExcludeFieldList = ref < string[] >(['operation'])
    // 设置默认分页
    const pageSizeOptions = ref < number[] >([20, 40, 60, 80, 100, 200, 500])
    // 初始化配置
    const tableDataModel = ref < TableDataInterFace >(new TableDataModel(props.tableData))
    const init = (): void => {
      // 配置复选框
      if (tableDataModel.value.authControl && tableDataModel.value.authControl.isCheckBox === true) {
        tableDataModel.value.tableInfo.columns.splice(0, 0, {
          type: 'checkbox',
          title: '',
          field: '',
          width: 50,
          fixed: tableDataModel.value.authControl.isCheckBoxLeft === false ? undefined : 'left'
        })
        tableDataModel.value.tableInfo.checkboxConfig = {
          checkField: 'checked',
          labelField: 'nickname',
          checkMethod: ({
            row
          }: any) => {
            return (!row.disable) === true
          }
        }
      }
      // 自定义展开
      if (tableDataModel.value.authControl && tableDataModel.value.authControl.isExpand === true) {
        tableDataModel.value.tableInfo.columns.splice(0, 0, {
          type: 'expand',
          title: '',
          field: '',
          width: 50,
          slots: {
            content: 'content_tempalte'
          }
        })
      }
      // 单选框
      if (tableDataModel.value.authControl && tableDataModel.value.authControl.isRadio === true) {
        tableDataModel.value.tableInfo.columns.splice(0, 0, {
          type: 'radio',
          title: '选择',
          field: '',
          width: 50,
          fixed: 'left'
        })
        tableDataModel.value.tableInfo.radioConfig = {
          highlight: true,
          trigger: 'row',
          checkMethod: ({
            row
          }: any) => {
            return (!row.disable) === true
          }
        }
      }
      // 配置表格自定义展示和过滤器
      tableDataModel.value.tableInfo.columns.forEach((item: any) => {
        if (item.slots) {
          Object.keys(item.slots).forEach(element => {
            templateList.value.push({
              template: item.slots[element],
              slotTemplate: item.slots[element] + '_' + element
            })
            item.slots[element] = item.slots[element] + '_' + element
          })
        }
        if (item.format === 'time') {
          item.formatter = (val: any) => {
            return formatDateTime(val.cellValue)
          }
        } else if (item.format === 'prick') {
          item.formatter = (val: any) => {
            return val.cellValue ? `￥${XEUtils.commafy(XEUtils.toNumber(val.cellValue), { digits: 2 })}` : ''
          }
        } else if (item.format === 'date') {
          item.formatter = (val: any) => {
            return formatDateTime(val.cellValue, 'YYYY-MM-DD')
          }
        }
        if (item.isCheck === false) {
          columnExcludeFieldList.value.push(item.field)
        }
        // if (item.searchFilter) {
        //   switch (item.searchFilter.type) {
        //     case 'input':
        //       item.filters = [{
        //         data: ''
        //       }]
        //       item.filterRender = {
        //         name: 'AInput',
        //         props: {
        //           placeholder: item.searchFilter.placeholder,
        //           maxlength: 30,
        //           allowClear: true
        //         }
        //       }
        //       break
        //     case 'select':
        //       item.filters = item.searchFilter.filterMultiple
        //         ? [{
        //             data: []
        //           }]
        //         : [{
        //             data: null
        //           }]
        //       item.filterRender = {
        //         name: 'ASelect',
        //         options: item.searchFilter.list,
        //         props: {
        //           mode: item.searchFilter.filterMultiple ? 'multiple' : '',
        //           placeholder: item.searchFilter.placeholder,
        //           maxTagCount: 1,
        //           allowClear: true
        //         }
        //       }
        //       break
        //       // case 'rangePicker':
        //       //   item.filters = [{ data: [] }]
        //       //   item.filterRender = { name: 'ADatePicker', props: { type: 'date', format: 'YYYY/MM/DD' } }
        //       //   break
        //   }
        // }
      })
      // 配置右侧操作功能栏目
      if (tableDataModel.value.operation) {
        let width = 0
        operationList.value = tableDataModel.value.operation.dataList.filter(item => item.isShow === true)
        displaySize.value = tableDataModel.value.operation && tableDataModel.value.operation.displaySize ? tableDataModel.value.operation.displaySize : 3
        operationList.value.forEach((item, index) => {
          if (index < displaySize.value) {
            width += item.width
          }
        })
        if (operationList.value.length > displaySize.value) {
          width += 30
        }
        if (width > 0) {
          tableDataModel.value.tableInfo.columns.push({
            title: tableDataModel.value.operation.label,
            field: 'operation',
            slots: {
              default: 'operation_template'
            },
            // align: 'center',
            isCheck: false,
            showOverflow: false,
            width: width + 20,
            fixed: 'right'
          })
        }
      }
      const toolbarConfig: any = {}
      // 配置表格顶部功能
      if (tableDataModel.value.authControl && tableDataModel.value.authControl.toolbarCustom === true) {
        toolbarConfig.custom = true
      }
      // 表头左侧功能组
      if (tableDataModel.value.titleOperation && tableDataModel.value.titleOperation.some(item => item.position !== 'right')) {
        toolbarConfig.slots = {}
        toolbarConfig.slots.buttons = 'toolbar_buttons'
      }
      // 表头右侧功能组
      if (tableDataModel.value.titleOperation && tableDataModel.value.titleOperation.some(item => item.position === 'right')) {
        if (!toolbarConfig.slots) {
          toolbarConfig.slots = {}
        }
        toolbarConfig.slots.tools = 'toolbar_tools'
      }
      if (tableDataModel.value.authControl && (tableDataModel.value.authControl.export || tableDataModel.value.authControl.import || tableDataModel.value.authControl.print)) {
        if (!toolbarConfig.slots) {
          toolbarConfig.slots = {}
        }
        toolbarConfig.slots.tools = 'toolbar_tools'
      }
      if (Object.keys(toolbarConfig).length > 0) {
        tableDataModel.value.tableInfo.toolbarConfig = {}
        Object.keys(toolbarConfig).forEach((config: any) => {
          tableDataModel.value.tableInfo.toolbarConfig[config] = toolbarConfig[config]
        })
      }
      if (tableDataModel.value.tableInfo.columns.findIndex(fItem => fItem.sortable) > -1) {
        tableDataModel.value.tableInfo.sortConfig = {
          remote: true,
          trigger: 'cell'
        }
      }
      // 配置自定义字段不可选
      checkColumnConfig()
      nextTick(() => {
        if (tableDataModel.value.authControl && tableDataModel.value.authControl.columnDrop === true) {
          columnDrop()
        }
        if (!(tableDataModel.value.authControl && tableDataModel.value.authControl.isAutoSelect === false)) {
          selectTableList()
        }
      })
      vxeGrid.value.reloadColumn(tableDataModel.value.tableInfo.columns as any)
    }
    const sortChangeEvent = (sortData:any) => {
      ctx.emit('settingTableDataSort', sortData)
    }
    const columnDrop = () => {
      const xTable = vxeGrid.value
      Sortable.create(xTable.$el.querySelector('.body--wrapper>.vxe-table--header .vxe-header--row') as HTMLElement, {
        handle: '.vxe-header--column:not(.col--fixed)',
        onEnd: (sortableEvent: {
          item: any;newIndex: number;oldIndex: number
        }) => {
          const targetThElem = sortableEvent.item
          const newIndex = sortableEvent.newIndex as number
          const oldIndex = sortableEvent.oldIndex as number
          const {
            fullColumn,
            tableColumn
          } = xTable.getTableColumn()
          const wrapperElem = targetThElem.parentNode as HTMLElement
          const newColumn = fullColumn[newIndex]
          if (newColumn.fixed) {
            // 错误的移动
            const oldTrElement = wrapperElem.children[oldIndex] as HTMLElement
            if (newIndex > oldIndex) {
              wrapperElem.insertBefore(targetThElem, oldTrElement)
            } else {
              wrapperElem.insertBefore(oldTrElement, targetThElem)
            }
            return alert('不允许拖动')
          }
          // 转换真实索引
          const oldColumnIndex = xTable.getColumnIndex(tableColumn[oldIndex])
          const newColumnIndex = xTable.getColumnIndex(tableColumn[newIndex])
          // 移动到目标列
          const currRow = fullColumn.splice(oldColumnIndex, 1)[0]
          fullColumn.splice(newColumnIndex, 0, currRow)
          xTable.loadColumn(fullColumn)
          const sortJson = fullColumn.map((item: any, index: any) => {
            return {
              field: item.property,
              sort: index + 1
            }
          })
          ctx.emit('settingTableTitleSort', sortJson)
        }
      })
    }
    // 配置自定义字段不可选
    const checkColumnConfig = () => {
      tableDataModel.value.tableInfo.customConfig = {
        storage: false,
        checkMethod ({
          column
        }: any) {
          return !columnExcludeFieldList.value.includes(column.property)
        }
      }
    }
    // 获取复选框选中数据
    const getSelectionEvent = () => {
      const $table: any = vxeGrid.value
      const selectRecords = $table.getCheckboxRecords()
      return selectRecords
    }
    /**
     * 外层直接调用该方法设置表头
     */
    const initSettingTableTitle = (columns:ScolumnsInterFace[]): void => {
      tableDataModel.value.tableInfo.columns = columns
    }
    /**
     * 获取表个dataList数据
     */
    const getDataListByTable = () => {
      const data = vxeGrid.value.getTableData()
      return {
        dataList: data ? data.fullData : [],
        pageInfo: tableDataModel.value.pageInfo
      }
    }
    /**
     * 外层直接调用该方法可以从第一页开始查询: 适用于编辑,修改,刷新,删除等刷新列表操作
     */
    const initSelectTableList = (): void => {
      if (tableDataModel.value.pageInfo) {
        tableDataModel.value.pageInfo.currentPage = 1
      }
      selectTableList()
    }
    // 手工赋值默认值
    const getTableDefaultTable = (data = []) => {
      tableDataModel.value.tableInfo.data = data
    }
    // 根据操作数据 查询当前页面，如果是最后一页面则前推
    const settingPageSelectTable = (checkBoxtList = []) => {
      const getTableData = getDataListByTable()
      if (checkBoxtList.length > 0 && tableDataModel.value.pageInfo) {
        let currentPage = tableDataModel.value.pageInfo.currentPage
        if (getTableData.dataList.length === checkBoxtList.length) {
          if ((tableDataModel.value.pageInfo.currentPage * tableDataModel.value.pageInfo.pageSize) >= tableDataModel.value.pageInfo.total) {
            currentPage = currentPage - 1
          }
        }
        selectTableList(currentPage || 1)
      } else {
        selectTableList()
      }
    }
    /**
      * 查询数据方法
      * currentPage:自定义查询当前页
      * pageSize:自定义查询页数
    */
    const selectTableList = (currentPage?:number, pageSize?:number): void => {
      vxeGrid.value.clearCheckboxRow()
      if (tableDataModel.value.pageInfo) {
        if (currentPage) {
          tableDataModel.value.pageInfo.currentPage = currentPage <= 0 ? 1 : currentPage
        }
        if (pageSize) {
          tableDataModel.value.pageInfo.pageSize = pageSize
        }
      }
      tableDataModel.value.callback(tableDataModel.value.pageInfo, tableDataModel.value.tableInfo.data).then((res: ResultInterFace < any >) => {
        if (tableDataModel.value.pageInfo && res && res.total) {
          tableDataModel.value.pageInfo.total = Number(res.total)
        }
        vxeGrid.value.loadData(res.resultList || [])
        if (res && res.checkList) {
          selectRowList.value = res.checkList
          nextTick(() => {
            toggleCheckboxRow(res.checkList || [])
          })
        }
      }).catch(() => {
        nextTick(() => {
          vxeGrid.value.recalculate(true)
          vxeGrid.value.clearCurrentRow()
        })
      })
    }
    const toggleCheckboxRow = (checkList: Array < any >) => {
      tableDataModel.value.tableInfo.checkboxConfig.checkMethod = false
      vxeGrid.value.setCheckboxRow(checkList, true)
      tableDataModel.value.tableInfo.checkboxConfig.checkMethod = ({ row }: any) => {
        return (!row.disable) === true
      }
    }
    /**
     * 分页选择每页数量方法
     */
    const handlePageChange = ({ type }:any) => {
      if (type === 'size') {
        initSelectTableList()
        ctx.emit('chagngSizeFun', tableDataModel.value.pageInfo)
      } else {
        selectTableList()
      }
    }
    const isTreeExpandByRow = (row: any) => {
      return vxeGrid.value.isTreeExpandByRow(row)
    }
    const selectCheckBox = ({ records, row }:any) => {
      selectRowList.value = records
      ctx.emit('selectCheckBox', records, row)
    }
    const selectRadio = ({ row, rowIndex }:any) => {
      ctx.emit('selectRadio', row, rowIndex)
    }
    // 初始化运行
    onMounted(() => {
      init()
    })
    const formatDateTime = (value: string | number | Date, formatStr = 'YYYY-MM-DD HH:mm:ss') => {
      return value ? formatTime(Number(value), formatStr) : '--'
    }
    const rowspanMethod = ({ row, _rowIndex, column, visibleData }:any) => {
      const fields = tableDataModel.value.rowspanList || []
      const cellValue = row[column.property]
      if (cellValue && fields.includes(column.property)) {
        const prevRow = visibleData[_rowIndex - 1]
        let nextRow = visibleData[_rowIndex + 1]
        if (prevRow && prevRow[column.property] === cellValue) {
          return { rowspan: 0, colspan: 0 }
        } else {
          let countRowspan = 1
          while (nextRow && nextRow[column.property] === cellValue) {
            nextRow = visibleData[++countRowspan + _rowIndex]
          }
          if (countRowspan > 1) {
            return { rowspan: countRowspan, colspan: 1 }
          }
        }
      }
    }
    return {
      sortChangeEvent,
      settingPageSelectTable,
      getDataListByTable,
      operationList,
      rowspanMethod,
      displaySize,
      handlePageChange,
      selectRowList,
      selectRadio,
      selectCheckBox,
      initSettingTableTitle,
      formatDateTime,
      getTableDefaultTable,
      isTreeExpandByRow,
      initSelectTableList,
      tableId,
      toggleCheckboxRow,
      tableDataModel,
      selectTableList,
      pageSizeOptions,
      init,
      templateList,
      columnExcludeFieldList,
      columnDrop,
      vxeGrid,
      getSelectionEvent
    }
  },
  methods: {
    clearSearchAllFun () {
      const tableGrid: any = this.$refs.vxeGrid || undefined
      tableGrid.clearFilter()
    },
    // 触发表头搜索条件
    filterMethod ({
    //   column,
      property,
      values,
      datas
    //   filters
    }: any) {
      this.$emit('vxeTableSearchFun', property, values[0] || datas[0])
      console.log(property) // 字段名
      console.log(values) // 获取select值
      console.log(datas) // 获取input值
    },
    // 自定义展示选择,后触发该事件
    customChange (customData: any) {
      if (customData.type === 'confirm') {
        const tableGrid: any = this.$refs.vxeGrid || undefined
        const list = tableGrid.getColumns()
        let noDisplay: string[] = []
        noDisplay = this.tableDataModel.tableInfo.columns.filter((item) => {
          return !list.some((ditem: any) => ditem.property === item.field)
        }).map((item) => item.field) as string[]
        this.$emit('settingCustomField', noDisplay)
      }
    },
    // 点击操作执行方法
    buttonClick (buttonData: OperationOptionsInterFace|TitleOptionsInterFace, data: any) {
      buttonData.buttonFun && this.handChange(buttonData.buttonFun, data)
    },
    // 整体回调方法
    handChange (fun: string, val: any) { // 按钮方法总返回
      if (fun) {
        this.$emit(fun, val)
      }
    },
    // 配置button组件Fun属性
    changeButtonData (item: any, type = 'link') {
      item.Fun = 'buttonclick'
      if (!item.options) {
        item.options = {
          type: type
        }
      }
      return item
    }
  },
  components: {
    IButton
    // 'a-spin': Spin,
    // 'a-button': Button,
    // 'a-pagination': Pagination
  }
})
</script>
